/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro';
import { Swiper } from '@tarojs/components';
import { AtActionSheet, AtActionSheetItem, AtModal } from "taro-ui"

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast, Loading, Modal, ActionSheet} from '../../library/func';
import Icon from '../../project/style/icon';
import Http from '../../project/func/http/http';
import '../../library/style/patch.css';

import { Addcbtn, Cbtn, Chead, Destop, Editcunit, Ibottom, Ibottomp, Listunitone, Listunittwo, LogoLine, LogoLinep, Tabheader } from '../../project/comp';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Abumlist extends Component {

	constructor(props) {
        super(props);
        this.state = {
            list:[],
            // 气泡显隐
            show: false,
            // 权限气泡显隐
            auth: false,
            // 从列表页面获取到的id,
            id: 0,
            // 从列表页面获取到的name,
            name: '',
            fk_cid1: 0,
            fk_cid2: 0,
            // 是否为管理员
            is_master: false
        }

        // Http.AuthOk((res)=>{
        //     console.log(res);
        // })

    }
/******************************************************************************************
 * 生命周期
 ******************************************************************************************/
// willMount
componentWillMount(){
    this.setState({
        id: this.$router.params.fk_cid2,
        name: this.$router.params.cat_name
    })
}
// didMount
componentDidMount(){
    
    this.getData()
}

// didShow
componentDidShow(){
    this.getData()
}

getData = (callbcak)=> {

    // 检测是否为管理员
    Http.AuthOk((res)=>{
        this.setState({
            is_master:res
        })
    })

    // 取数据
    Http.Loading({
        url: 'material/list.php?fk_cid2='+ this.state.id,
        success: (data)=>{
            this.setState({
                list: data
            })
            if(callbcak){
                callbcak();
            }	
        }
    })

}

/******************************************************************************************
 * 自定义方法
 ******************************************************************************************/
// 气泡显隐
onshow = ()=> {
    this.setState({
        show: !this.state.show
    })
}
// 点击取消按钮
onCancel = ()=> {
    this.setState({
        show: false
    })
}
// 点击遮罩层
onClose = ()=> {
    this.setState({
        show: false
    })
}
// onRedirect
onRedirect(url){
    wx.redirectTo({
        url: url
    })
}
    
// onNavigate
onNavigate(url){
    wx.navigateTo({
        url: url
    })
}
    
//onNavigateBack
onNavigateBack(num=1){
     wx.navigateBack({
        delta: num
     })                    
}   

// 上传图片
addAblum = ()=> {
    let fk_cid1 = this.$router.params.fk_cid1
    let fk_cid2 = this.$router.params.fk_cid2
    this.setState({
        show:false
    })
    wx.chooseImage({
        success: (res)=> {
            
            const tempFilePaths = res.tempFilePaths
            for(let key in tempFilePaths){

                    Http.Upload({
                        filePath: tempFilePaths[key],
                        success: (res) => {

                            Http.post({
                                url: 'material/logic/add.php',
                                data:{
                                    fk_cid1: fk_cid1,
                                    fk_cid2: fk_cid2,
                                    set_image: res
                                },
                                success:(res)=>{
                                }
                            })

                        }
                    })

            }

            setTimeout(()=>{
                this.getData()
            },1500)
        }
      })
}

// 删除相册
deleteAblum = ()=> {
    this.setState({
        show: false
    })
    Modal.confirm('确定删除此相册吗?', '删除后不可恢复', ()=>{
        Http.post({
            url:'materialCate/logic/delete.php',
            data:{
                id: this.state.id
            },
            success: (data)=> {
                Toast.success('删除成功')
                setTimeout(()=>{
                    this.onNavigateBack()
                },1500)
            }
        })
    },()=>{
        // 取消不进行任何操作
    })
}

auth = (type)=> {
    
    Http.post({
        url: 'materialCate/logic/changeAuth.php',
        data:{
            id: this.state.id,
            set_authority: type
        },
        success: (data)=>{
            this.setState({
                auth: false
            })
            Toast.success('修改成功')
        }
    })
}

// 修改相册权限（公开）
handleConfirm = ()=> {
    this.auth(0)
}

// 修改相册权限 （仅自己可见）
handleCancel = ()=> {
    this.auth(1)
}

// 点击遮罩层关闭
handleClose = ()=> {
    this.setState({
        auth: false
    })
}

// 点击权限
albumAuth = ()=> {
    this.setState({
        show:false,
        auth: true
    })
}

/******************************************************************************************
 * 渲染
 ******************************************************************************************/
    render() {
        return (
            <CPage>
                <CContent>

                    {/* 顶部 */}
                    {this.state.is_master == true ?
                        <Chead title={this.state.name} bt='10 solid #f2f2f2' onDosome={this.onshow}></Chead>
                    :
                        <CLine h='45' bg='#fff' x='center' size='16' bt='10 solid #f2f2f2' style='position:fixed; top:0; left:0; width:100%'>{this.state.name}</CLine>
                    }
                    
                    {this.state.is_master == true ?
                        <CLine h="45"></CLine>
                    :
                        <CLine h="45"></CLine>
                    }
                    

                    {this.state.list.map(item => {
                        return (
                            <view>
                                <CLine h="40" bg="#fff" y="bottom">
                                    <CHand style="width:88%; margin-left:6%">
                                        <text style="font-size:45rpx; line-height:30rpx;">{item.set_month}</text>
                                        <text style="font-size:28rpx;">月</text>
                                        <text style="font-size:28rpx;margin-left:16rpx;">{item.set_year}</text>
                                    </CHand>
                                </CLine>


                                <CBetween bg="#fff" pb="40" px='20'>

                                    {/* 相册内容 */}
                                    {item.item.length !== 0 &&
                                        <CWrap style="width:88%;">
                                            {item.item.map(i => {
                                                return (
                                                    <CHand style="width:50%" y="center"  x="center" pt="15"  onClick={ this.onNavigate.bind(this, '/screen/album/albumdetail?id=' + i.id) }>
                                                        <CItemY class="w1">
                                                            <image style="width:280rpx; height:400rpx" src={i.set_image}/>
                                                        </CItemY>
                                                    </CHand>
                                                )
                                            })}
                                        </CWrap>
                                    }
                                
                                </CBetween>
                            </view>
                        )
                    })}

                </CContent>

                {/* 点击操作显示出来的层 */}
                <AtActionSheet isOpened={this.state.show} cancelText='取消' onCancel={this.onCancel} onClose={this.onClose}>
                    <AtActionSheetItem>
                        <CItemX x='center' y='center' onClick={this.addAblum}>
                            <CSvg icon={Icon.shareaf} w='22' h='22' color='#7b7b7b' mr='6'></CSvg>
                            <CText size='16' color='#595959'>上传图片</CText>
                        </CItemX>
                    </AtActionSheetItem>
                    <AtActionSheetItem>
                        <CItemX x='center' y='center' onClick={this.onNavigate.bind(this, '/screen/album/changename?id=' + this.state.id + '&name='+ this.state.name)}>
                            <CSvg icon={Icon.add} w='25' h='25' color='#7b7b7b' mr='6'></CSvg>
                            <CText size='16' color='#595959'>编辑名称</CText>
                        </CItemX>
                    </AtActionSheetItem>
                    <AtActionSheetItem>
                        <CItemX x='center' y='center' onClick={this.deleteAblum}>
                            <CSvg icon={Icon.lajit} w='20' h='20' color='#7b7b7b' mr='8'></CSvg>
                            <CText size='16' color='#595959'>删除相册</CText>
                        </CItemX>
                    </AtActionSheetItem>
                    <AtActionSheetItem>
                        <CItemX x='center' y='center' onClick={this.albumAuth}>
                            <CSvg icon={Icon.time} w='20' h='20' color='#7b7b7b' mr='6'></CSvg>
                            <CText size='16' color='#595959'>&nbsp;&nbsp;&nbsp;权限&nbsp;&nbsp;&nbsp;</CText>
                        </CItemX>
                    </AtActionSheetItem>
                </AtActionSheet>

                {/* 权限弹窗 */}
                <AtModal
                    isOpened = {this.state.auth}
                    title='标题'
                    cancelText='仅自己可见'
                    confirmText='公开'
                    onClose={ this.handleClose }
                    onCancel={ this.handleCancel }
                    onConfirm={ this.handleConfirm }
                    content='是否修改相册权限?'
                />

            </CPage>
        );
    }
}
